<template>
  <div>
    <el-form
      ref="queryCondition"
      class="queryCondition"
      :model="queryCondition"
      label-width="auto"
    >
      <el-row :gutter="12">
        <el-col :span="4" :offset="1">
          <el-form-item prop="billCodeSml" label="名称">
            <el-input v-model.trim="queryCondition.billCodeSml"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="billMadeTimeMin" label="类别">
            <el-select v-model="queryCondition.billMadeTimeMin"> </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="billMadeTimeMax" label="截止时间">
            <el-date-picker v-model="queryCondition.billMadeTimeMax">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label-width="10px">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="queryByCondition(1)"
              >查询
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="1">
          <el-form-item label-width="0">
            <el-button
              type="warning"
              icon="el-icon-refresh"
              @click="() => $refs.queryCondition.resetFields()"
            >
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <test-bill-insert></test-bill-insert>
    <el-table
      :data="results"
      ref="resultsTable"
      class="resultsTable"
      height="480px"
      stripe
      highlight-current-row
      @row-click="rowClick"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" align="center"></el-table-column>

      <el-table-column type="expand">
        <template #default="{ row }">
          <el-descriptions border direction="vertical">
            <el-descriptions-item label="code">{{
              row.billCode
            }}</el-descriptions-item>
            <el-descriptions-item>
            </el-descriptions-item>
          </el-descriptions>
            <el-table
              :data="row.testDetails"
              ref="readOnlyDetailTable"
              class="readOnlyDetailTable"
              stripe
              highlight-current-row
            >
              <el-table-column
                prop="testDetailId"
                label="ID/Code"
              ></el-table-column>
              <el-table-column
                prop="quantity"
                label="数量"
                sortable
              ></el-table-column>
              <el-table-column
                prop="materialName"
                label="材料"
              ></el-table-column>
            </el-table>

        </template>
      </el-table-column>

      <el-table-column prop="billCode" label="ID/Code"></el-table-column>

      <el-table-column
        sortable
        label="billMadeTime"
        prop="billMadeTime"
        align="center"
      >
      </el-table-column>

      <el-table-column
        sortable
        label="shijian"
        align="center"
        :sort-by="['billMadeTime']"
      >
        <template #default="{ row }">
          <el-date-picker
            v-model="row.billMadeTime"
            value-format="yyyy-MM-ddThh:mm:ss"
            type="datetime"
          ></el-date-picker>
        </template>
      </el-table-column>
      <el-table-column width="180px" fixed="left">
        <template #default="{ row }">
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-edit"
            @click="openById(row.billCode)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-edit"
            @click="deleteById(row.billCode)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="total"
      :page-size="queryCondition.pageSize"
      :current-page.sync="queryCondition.pageNum"
      @current-change="queryByCondition"
      :page-sizes="[8, 10, 20, 50]"
      @size-change="sizeChange"
      layout="sizes,total, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
/**
 * {
  "total": 12,
  "results": [
    {
      "billCode": "TEST20220120439900003",
      "billMadeTime": "2022-02-11T09:26:57.408",
      "testDetails": [
        {
          "testDetailId": 14,
          "materialName": "葡萄014",
          "quantity": 10
        }
      ],
      "version": 24
    },
 *
 * */
// import New from './components/New.vue';
import TestBillInsert from "@/components/infru/TestBillInsert";
import DecorateLine from "@/components/common/DecorateLine";
export default {
  name: "TestBill",
  components: {
    TestBillInsert,
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      queryCondition: {
        billCodeSml: "",
        billMadeTimeMax: null,
        billMadeTimeMin: null,

        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      results: [],
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    sizeChange(v) {
      this.$message.warning("Debug v :" + JSON.stringify(v) + typeof v);
      this.queryCondition.pageSize = v;
      this.queryByCondition(1);
    },
    queryByCondition(pageNum) {
      if (pageNum) this.queryCondition.pageNum = pageNum;
      //todo: arrange into apis
      this.$http({
        method: "post",
        url: "http://localhost:9098/testBill/query",
        data: this.queryCondition,
      }).then(
        (res) => {
          this.total = res.data.total;
          this.results = res.data.results;
        },
        (error) => {
          this.$message.warning("query mistake：" + error.response.status);
        }
      );
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-row {
  text-align: left;
}
</style>
